<template>
	<view class="home">
		<view class="top">
			<JyStatusBar></JyStatusBar>
			<JyTitleBar :title="`成绩管理`" :color="'#333'" :hasArrow="true" />
		</view>
        
		<view class="home-main" :style="{ 'margin-top' : userInfo.userType == 'T' ? '-150rpx' : '-100rpx' }">
			<view class="home-tabs" v-if="userInfo.userType == 'T'">
				<u-tabs :list="tabList" @click="click" :lineColor="'#4275FD'"
					:lineWidth="'30rpx'" :lineHeight="'6rpx'" :itemStyle="{
                        height: '88rpx',
                        width: '344rpx',
                        fontSize: '30rpx',
                        fontWeight: 400,
                    }" :inactiveStyle="{ color: '#999999' }" :activeStyle="{
                        color: '#333333',
                        fontSize: '30rpx',
                        fontWeight: 600,
                    }" :scrollable="false"></u-tabs>
			</view>
			<view :class="[
                    'main-box',
                    userInfo.userType == 'T' ? 'teacher-box' : '',
                ]">
				<Student ref="student" v-if="userInfo.userType == 'P'">
				</Student>
				<Teacher ref="teacher" v-if="userInfo.userType == 'T'"
					:active="active"></Teacher>
			</view>
		</view>
	</view>
</template>

<script>
	import JyTitleBar from "@/components/jyTitleBar.vue"
	import JyStatusBar from "@/components/jyStatusBar.vue"

	import Student from "@/pages/achievement/pages/student/index.vue"
	import Teacher from "@/pages/achievement/pages/teacher/index.vue"

	import { mapState } from "vuex"
	export default {
		data() {
			return {
				active: "录入列表",
				// tabList: [{ name: "录入列表" },

				// 	{ name: "公布排名" }
				// ],
				tabList: [{ name: "录入列表" }, { name: "年级成绩分析" },
					{ name: "公布排名" }
				],

			}
		},
		components: {
			JyStatusBar,
			JyTitleBar,
			Student,
			Teacher,
		},
		computed: {
			...mapState(["userInfo"]),
		},
		onShow() {
			console.log(this.active)
			this.tabList = [{ name: "录入列表" }, { name: "年级成绩分析" },
				{ name: "公布排名" }
			]
			if (!this.userInfo?.teacherInfo?.isSchoolManager) {
				this.tabList.pop()
				this.tabList.pop()
			}
			if (this.userInfo.userType == "T") {
				if (this.active == "录入列表") {
					this.$refs.teacher.$refs.entry.reset()
					this.$refs.teacher.$refs.entry.getList()
				} else if (this.active == "年级成绩分析") {
					this.$refs.teacher.$refs.analysis.reset()
					this.$refs.teacher.$refs.analysis.getList()
				} else if (this.active == "公布排名") {
					this.$refs.teacher.$refs.publish.reset()
					this.$refs.teacher.$refs.publish.getList()
				}
			} else {
				this.$refs.student.reset()
				this.$refs.student.getList()
			}
		},
		methods: {
			click(item) {
				this.active = item.name
				this.$nextTick(() => {
					if (this.userInfo.userType == "T") {
						if (this.active == "录入列表") {
							this.$refs.teacher.$refs.entry.reset()
							this.$refs.teacher.$refs.entry.getList()
						} else if (this.active == "年级成绩分析") {
							this.$refs.teacher.$refs.analysis.reset()
							this.$refs.teacher.$refs.analysis.getList()
						} else if (this.active == "公布排名") {
							this.$refs.teacher.$refs.publish.reset()
							this.$refs.teacher.$refs.publish.getList()
						}
					} else {
						this.$refs.student.reset()
						this.$refs.student.getList()
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.home {
		height: 100vh;
		overflow: hidden;

		.top {
			width: 100%;
			height: 296rpx;
			background: url("@/pages/achievement/static/img/banner.webp") 0 0 no-repeat;
			background-size: 100% 100%;
		}

		.home-main {
			position: relative;
			z-index: 2;
			margin-top: -150rpx;
			height: calc(100% - 146rpx);

			.home-tabs {
				padding-bottom: 8rpx;
			}

			.main-box {
				background-color: $jy-bg-color-main;
				border-radius: 32rpx 32rpx 0 0;
				height: 100%;
			}

			.teacher-box {
				height: calc(100% - 96rpx);
			}
		}
	}
</style>
